<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="true" :safe-area-inset-bottom="false">
			<template #top>
				<view class="header">
					<view class="bg">
						<image src="@/static/bg3.png" mode="aspectFill"></image>
					</view>
					<view style="padding: 0 16rpx 0;">
						<view class="nav">
							<view class="nav-item" :class="tabIndex == 1 ? 'active':''" @click="onChange(1)">
								<image v-if="tabIndex == 1" src="@/static/time2.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;">
								</image>
								<image v-if="tabIndex == 2" src="@/static/time1.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;">
								</image>
								<text>进行中</text>
							</view>
							<view class="nav-item" :class="tabIndex == 2 ? 'active':''" @click="onChange(2)">
								<image v-if="tabIndex == 1" src="@/static/check1.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;">
								</image>
								<image v-if="tabIndex == 2" src="@/static/check2.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;">
								</image>
								<text>已成功</text>
							</view>
						</view>
						<view class="sort">
							<view class="sort-item" :class="assort == 1 ?'assortActive':''" @click="onSort(1)">
								全部
							</view>
							<view class="sort-item" :class="assort == 2 || assort == 3 ?'assortActive':''" @click="onSort(assort == 2 ?3:2)">
								按时间
							</view>
							<view class="sort-item" :class="assort == 4 || assort == 5 ?'assortActive':''" @click="onSort(assort == 4 ?5:4)">
								按价格
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="main">
				<view class="box" v-for="i in dataList" :key="i.id" @click="goLink(i.id)">
					<view class="box-top">
						<view class="box-top-left">
							<image :src="i.get_member?.avatar_image" mode="aspectFill"></image>
							<text>{{ i.get_member?.nickname}} 发起的心愿</text>
						</view>
						<view class="box-top-right">
							<text>{{ tabIndex == 1 ? `进度：${i.progress}`:'已完成'}}</text>
						</view>
					</view>
					<view class="box-body">
						<view class="box-body-img">
							<image :src="i.image" mode="aspectFill"></image>
						</view>
						<view class="box-body-info">
							<view style="margin-bottom: 12rpx;">{{ i.goods_name }}</view>
							<view>￥{{ i.price }}</view>
						</view>
					</view>

					<view class="box-btn" v-if="tabIndex == 1">
						<view class="box-btn-left">
							<uv-avatar-group :urls="imgUrls(i)" size="24" gap="0.4"></uv-avatar-group>
							<text>参与助力奖励{{i.wish}}心愿值起</text>
						</view>
						<view class="box-btn-right">
							帮TA助力
						</view>
					</view>
					<view class="box-bottom" v-if="tabIndex==2">
						<image src="@/static/time2.png" mode="aspectFill"
							style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"></image>
						<text>开始 {{ i.created_at }} -{{ i.end_time }}结束</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		computed,
		watch,
		nextTick
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from "@/api/base"
	let assort = ref(1)
	let tabIndex = ref(1)
	const paging = ref(null);
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'group-buying.wishProductList',
				page,
				limit,
				type: "5",
				mid: "4",
				assort: assort.value
			});
			let afoot_list = res.data.afoot_list
			let finish_list = res.data.finish_list.data
			if (tabIndex.value == 1) {
				paging.value.complete(afoot_list);
			}
			if (tabIndex.value == 2) {
				paging.value.complete(finish_list);
			}
		} catch (e) {
			paging.value.complete(false);
		}
	}
	const onChange = async (num) => {
		dataList.value = []; // 清空数据
		tabIndex.value = num
		await nextTick(); // 确保 DOM 更新
		await paging.value.reload(true)
	}
	const onSort = async(num)=>{
		assort.value = num
		await paging.value.reload(true)
	}
	const imgUrls = (i) => {
		if (i.get_group_user_log) {
			return i.get_group_user_log.map(v => v.get_member?.avatar)
		} else {
			return []
		}
	}
	const goLink = (id)=> {
		uni.navigateTo({
			url: `/packages/wish/detail?id=${id}`
		})
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, #FFF1EE 0%, rgba(249, 229, 200, 0.53) 100%);
	}
</style>
<style scoped lang="scss">
	.box {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 8rpx 28rpx;
		margin-bottom: 16rpx;

		&-btn {
			background-image: url('../../static/bg4.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 72rpx;
			padding: 0 16rpx;

			&-left {
				font-weight: 400;
				font-size: 24rpx;
				color: #4C0606;
				display: flex;
				align-items: center;
			}

			&-right {
				font-weight: 500;
				font-size: 24rpx;
				color: #FBF4EF;
			}
		}

		&-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 34rpx 0;
			border-bottom: 2rpx solid #F7F7F7;

			&-left {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #4C0606;

				&>image {
					width: 48rpx;
					height: 48rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 100%;
					overflow: hidden;
					margin-right: 12rpx;
				}
			}

			&-right {
				font-weight: 400;
				font-size: 24rpx;
				color: #4C0606;
			}
		}

		&-body {
			display: flex;
			padding: 28rpx 24rpx;

			&-img {
				width: 94rpx;
				height: 94rpx;
				border-radius: 10rpx;
				margin-right: 6rpx;
			}

			&-info {
				flex: 1;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 28rpx;
			}
		}

		&-bottom {
			background: #FFF7F6;
			border-radius: 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #4C0606;
			padding: 20rpx 18rpx;
			display: flex;
			align-items: center;
		}
	}

	.main {
		padding: 0 25rpx 25rpx;
	}

	.sort {
		display: flex;
		justify-content: flex-end;
		padding: 32rpx 0 26rpx;

		&-item {
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
			margin-left: 36rpx;
		}
	}

	.bg {
		height: 364rpx;
		width: 100%;
	}

	.nav {
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		font-weight: 400;
		font-size: 30rpx;
		color: #4C4C4C;

		&-item {
			flex: 1;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 18rpx 0;
			border-radius: 20rpx;
		}
	}

	.active {
		background: #F04E2A !important;
		color: #FFFFFF;
	}
	.assortActive{
		color: #F04E2A;
	}
</style>